<template>
  <div class="noteall">
    <h2>热门话题</h2>
    <div class="huati">
      <router-link
        tag="li"
        v-for="noteall in query"
        :key="noteall.noteId"
        :to="{ name: 'Note', params: { id: noteall.noteId } }"
      >
        <!-- v-show="index<8" -->
        <span class="uId">{{noteall.userId}}</span>
        <span class="Id">{{noteall.noteId}}</span>
        <div class="user">
          <img :src="'/api/upload/' + noteall.userImg" class="rtImg" />
          <span class="namespan">{{noteall.userName}}</span>
        </div>
        <div class="onteschild">
          <p>{{noteall.noteContent}}</p>
          <div class="onteschild_img"><img :src="'/api/upload/' + noteall.noteImg1" class="xqImg img-thumbnail" /></div>
          <div class="onteschild_img2"><img :src="'/api/upload/' + noteall.noteImg2" class="xqImg1 img-thumbnail" /></div>
        </div>
        <p class="timespan">{{formateDate(noteall.noteTime)}}</p>
        <hr />
      </router-link>
      
      <div id="pages">
        <input type="button" value="第一页" v-on:click="firstPage" id="first" class="btn1" />
        <input type="button" value="上一页" v-on:click="prePage" id="next" class="btn1" />
        <input type="button" value="下一页" v-on:click="nextPage" class="btn1" />
        <input type="button" value="最后一页" v-on:click="lastPage" id="last" class="btn1" />
        <span>第{{currentPage+1}}页/共{{pageNum}}页</span>
      </div>

    </div>
  </div>
</template>
<style lang="css" scoped>
h2 {
  font-size: 20px;
  color: #e6a23c;
  font-weight: 700;
  line-height: 48px;
  margin-left: 10px;
  margin-top: 20px;
}
.uId {
  display: none;
}
.Id {
  display: none;
}
.rtImg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  float: left;
  margin-left: 10px;
}
.namespan {
  font-size: 16px;
  margin-left: 15px;
  float: left;
  margin-top: 20px;
}
.onteschild p {
  clear: both;
  font-size: 18px;
  margin-left: 80px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 20px;
}
.onteschild_img{
  margin-left: 75px;
  width: 210px;
  height: 210px;
  overflow: hidden;
  display: inline-block;
  transition: all 0.5s;
}
.onteschild_img2{
  margin-left: 20px;
  width: 210px;
  height: 210px;
  overflow: hidden;
  display: inline-block;
  transition: all 0.5s;
}
.xqImg {
  width: 100%;
  height: 100%;
  /* margin-left: 75px; */
  cursor: pointer;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s;
}
.xqImg1 {
  width: 100%;
  height: 100%;
  /* margin-left: 75px; */
  cursor: pointer;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s;
}
.onteschild_img:hover,
.onteschild_img2:hover {
  transform: scale(1.1);
}
.timespan {
  color: rgb(158, 158, 158);
  font-size: 16px;
  margin-top: 20px;
  margin-left: 75px;
}
</style>
<script>
export default {
  data() {
    return {
      notealls: [],
      totalPage: [],// 所有页面的数据
      pageSize: 6, // 每页显示数量
      pageNum: 1, // 共几页
      dataShow: "", // 当前显示的数据
      currentPage: 0, // 当前页 默认当前显示第一页
    };
  },
  created() {
    this.$axios
      .get("/api/createNote/getNote", { params: { noteId: this.queryId } })
      .then(res => {
        console.log("res:", res);
        this.notealls = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  computed: {
    query() {
      this.queryId = this.$route.params.id;
      let healthArr = [];
      if (this.queryId == 1) {
        for (var i = 0; i < this.notealls.length; i++) {
          if (this.notealls[i].type == this.queryId) {
            healthArr.push(this.notealls[i]);
          }
        }
      } else if (this.queryId == 2) {
        for (var i = 0; i < this.notealls.length; i++) {
          if (this.notealls[i].type == this.queryId) {
            healthArr.push(this.notealls[i]);
          }
        }
        this.currentPage = 0;
      } else if (this.queryId == 3) {
        for (var i = 0; i < this.notealls.length; i++) {
          if (this.notealls[i].type == this.queryId) {
            healthArr.push(this.notealls[i]);
          }
        }
      } else if (this.queryId == 4) {
        for (var i = 0; i < this.notealls.length; i++) {
          if (this.notealls[i].type == this.queryId) {
            healthArr.push(this.notealls[i]);
          }
        }
      } else {
        for (var i = 0; i < this.notealls.length; i++) {
          healthArr.push(this.notealls[i]);
        }
      }

      // console.log('healthArr::::::',healthArr)
      // console.log('this.queryId',this.queryId)
      // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
      this.pageNum = Math.ceil(healthArr.length / this.pageSize) || 1;
      for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        this.totalPage[i] = healthArr.slice(
          this.pageSize * i,
          this.pageSize * (i + 1)
        );
      }
      // 获取到数据后显示第一页内容
      this.dataShow = this.totalPage[this.currentPage];
      return this.dataShow;
    }
  },
  methods: {
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate())
        +' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
      return formatdatetime;
    },
    // 第一页
    firstPage: function() {
      if (this.currentPage === 0) return;
      this.currentPage = 0;
      // console.log("第一页pageNum:",this.dataShow)
    },
    // 最后页
    lastPage: function() {
      if (this.currentPage === this.pageNum - 1) return;
      this.currentPage = this.pageNum - 1;
      // console.log("最后页pageNum:",this.dataShow)
    },
    // 上一页
    prePage: function() {
      if (this.currentPage === 0) return;
      this.currentPage--;
      // this.dataShow = this.totalPage[--this.currentPage];
      // console.log("点击上一页pageNum:",this.dataShow)
    },
    // 下一页
    nextPage: function() {
      if (this.currentPage === this.pageNum - 1) return;
      this.currentPage++;

      // this.dataShow = this.totalPage[++this.currentPage];
      // console.log("点击下一页 pageNum:",this.dataShow)
    }
  }
};
</script>